import React from 'react';
import PropTypes from 'prop-types';
import cn from 'classnames';
import { Link } from 'react-router-dom';
import Helper from '../../Helper';
import Button from '@kuiper-components/button';
import Dialog from '@kuiper-components/dialog';
import { useQuery, gql } from '@apollo/client';

import { FREQ_UNIT_MAP, INFORM_OPTIONS } from '../../../../common/constants';
import s from './Asset.module.css';
import collectType from '../../../../common/collectType';
import CollectFrequency from '../../CollectFrequency';
const ALERT_GROUP_QUERY = gql`
	{
		AlertGroupMany {
			isDefault
			receiverIds
			name
			_id
		}
	}
`;
export default function Asset({
	className,
	children,
	jobId,
	taskSettings,
	triggerType,
	target,
	showGoToSettings,
	note,
	alertSettings,
}) {
	const [visible, setVisible] = React.useState(false);
	const [groupData, setGroupData] = React.useState([]);
	const { data: alertData } = useQuery(ALERT_GROUP_QUERY);
	const groupArr = [];
	const notigicationArr = [];
	alertSettings &&
		INFORM_OPTIONS.forEach(e => {
			alertSettings.notification[e.value] && notigicationArr.push(e.label);
		});
	React.useEffect(() => {
		if (alertSettings && alertData) {
			alertData.AlertGroupMany.forEach(e => {
				if (alertSettings.alertGroupIds.includes(e._id)) {
					groupArr.push(e.name);
				}
			});
		}
		setGroupData(groupArr);
	}, [alertData]);
	return (
		<>
			<Button
				className={cn(className)}
				link
				primary
				onClick={() => setVisible(true)}
			>
				{children}
			</Button>
			<Dialog
				title={
					<div className={s.dialogtitle}>
						<span>{children}</span>
						<Helper
							overlayClassName={s.helpTooltip}
							overlay={
								<>
									<p>以下配置为该资产当次任务检测时设置的参数。</p>
									<p>
										如需查看最新周期性参数配置，请前往“资产列表-管理-周期配置”
									</p>
								</>
							}
							placement="right"
						/>
					</div>
				}
				visible={visible}
				className={s.modal}
				onClose={() => setVisible(false)}
			>
				<table className={cn(className, s.currentSettings)}>
					<tbody>
						<tr>
							<td className={s.label}>资产名称:</td>
							<td className={s.value}>{note}</td>
						</tr>
						<tr>
							<td className={s.label}>资产地址:</td>
							<td className={s.value}>{target}</td>
						</tr>
						<tr>
							<td className={s.label}>监测方式:</td>
							<td className={s.value}>
								{collectType({
									triggerType,
									taskType: 'asset',
									collect: taskSettings?.collect,
								}) || <span className={s.nullspan}>--</span>}
							</td>
						</tr>
						<tr>
							<td className={s.label}>监测内容:</td>
							<td className={s.value}>
								<span>子域名</span>
								<span className={s.valSpan}>端口服务</span>
							</td>
						</tr>
						{(triggerType === 'schedule' ||
							triggerType === 'scheduleIncrement') && (
							<tr>
								<td className={s.label}>监测频率:</td>
								<td className={s.value}>
									<CollectFrequency
										viewmode
										value={taskSettings?.interval}
										unitMap={FREQ_UNIT_MAP}
									/>
								</td>
							</tr>
						)}
						{alertSettings && (
							<>
								<tr>
									<td className={s.label}>通知对象：</td>
									<td className={s.value}>
										{groupData[0]
											? groupData.map(e => {
													return (
														<span className={s.hl2} key={e}>
															{e}
														</span>
													);
											  })
											: '--'}
									</td>
								</tr>
								<tr>
									<td className={s.label}>通知类型：</td>
									<td className={s.value}>
										{notigicationArr[0]
											? notigicationArr.map((e, i) => {
													return (
														<span key={e}>
															{e}
															{i === notigicationArr.length - 1 ? '' : '、'}
														</span>
													);
											  })
											: '--'}
									</td>
								</tr>
							</>
						)}
						{/* <tr>
							<td className={s.label}>告警策略:</td>
							<td className={s.value}>
								{taskSettings?.alert?.enable ? <span>变动告警</span> : '无'}
							</td>
						</tr> */}
					</tbody>
				</table>
				<div className={s.btnContainer}>
					{showGoToSettings &&
						jobId &&
						(triggerType === 'schedule' ||
							triggerType === 'scheduleIncrement') && (
							<Link className={s.btn} to={`/job/${jobId}/asset/asset`}>
								<Button size="small" onClick={() => setVisible(false)}>
									前往修改
								</Button>
							</Link>
						)}
					<Button
						primary
						className={s.btn}
						size="small"
						onClick={() => setVisible(false)}
					>
						取消
					</Button>
				</div>
			</Dialog>
		</>
	);
}

Asset.propTypes = {
	className: PropTypes.string,
	children: PropTypes.node,
	jobId: PropTypes.string,
	target: PropTypes.string.isRequired,
	triggerType: PropTypes.string,
	taskSettings: PropTypes.shape({
		enable: PropTypes.bool,
		collect: PropTypes.object,
		interval: PropTypes.object,
		alert: PropTypes.object,
	}).isRequired,
	alertSettings: PropTypes.any,
	showGoToSettings: PropTypes.bool,
	note: PropTypes.string,
};

Asset.defaultProps = {
	className: s.asset,
	showGoToSettings: false,
	note: '',
};
